/* 
 * 
 */
Ext.define("ES.view.TreePickerEx",{
    extend:"Ext.form.field.Picker",
    //xtype:"treepickerex",
    alias:"widget.treepickerex",
    requires:["Ext.form.field.Picker"],
    triggerCls:Ext.baseCSSPrefix  + "form-arrow-trigger",
    
    config:{
        store:null,
        displayField:null,
        columns: null,
        selectOnTab: true,
        maxPickerHeight: 300,
        minPickerHeight: 100
    },
    editable: false,
    initComponent: function(){
        var me = this;
        me.callParent(arguments);
        this.addEvents("select");
        me.store.on('load', me.onLoad, me);
    },
    createPicker:function(){
        var me = this,
        picker = Ext.create("Ext.tree.Panel",{
            store: me.store,
            floating: true,
            hidden: true,
            displayField: me.displayField,
            columns: me.columns,
            maxHeight: me.maxTreeHeight,
            shadow: false,
            manageHeight: false,
            listeners:{
                itemclick: Ext.bind(me.onItemClick, me)
            },
            viewConfig:{
                viewConfig:{
                    render:function(view){
                        view.getEl().on('keypress', me.onPickerKeypress, me);
                    }
                }
            }
        }),
        view = picker.getView();
        view.on('render', me.setPickerViewStyles, me);
        if (Ext.isIE9 && Ext.isStrict){
            view.on('highlightitem', me.repaintPickerView, me);
            view.on('unhighlightitem', me.repaintPickerView, me);
            view.on('afteritemexpand', me.repaintPickerView, me);
            view.on('afteritemcollapse', me.repaintPickerView, me);
        }
        return picker;
    },
    setPickerViewStyles:function(view){
        view.getEl().setStyle({
            'min-height': this.minPickerHeight + 'px',
            'max-height': this.maxPickerHeight + 'px'
        });
    },
    repaintPickerView:function(){
        var style = this.picker.getView().getEl().dom.style;
        style.display = style.display;
    },
    alignPicker:function(){
        var me = this,picker;
        if (me.isExpanded){
            picker = me.getPicker();
            if (me.matchFieldWidth){
                picker.setWidth(me.bodyEl.getWidth());
            }
            if (picker.isFloating()) {
                me.doAlign();
            }
        }
    },
    onItemClick: function(view, record, node, rowIndex, e) {
        this.selectItem(record);
    },
    onPickerKeypress: function(e, el) {
            var key = e.getKey();
            if(key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
                this.selectItem(this.picker.getSelectionModel().getSelection()[0]);
            }
     },
     selectItem: function(record) {
        var me = this;
        me.setValue(record.get('id'));
        me.picker.hide();
        me.inputEl.focus();
        me.fireEvent('select', me, record)
    },
    onExpand: function() {
        var me = this,
            picker = me.picker,
            store = picker.store,
            value = me.value;

        if(value) {
            picker.selectPath(store.getNodeById(value).getPath());
        } else {
            picker.getSelectionModel().select(store.getRootNode());
        }

        Ext.defer(function() {
            picker.getView().focus();
        }, 1);
    },
    setValue: function(value) {
            var me = this,
                record;

            me.value = value;

            if (me.store.loading) {
                // Called while the Store is loading. Ensure it is processed by the onLoad method.
                return me;
            }

            // try to find a record in the store that matches the value
            record = value ? me.store.getNodeById(value) : me.store.getRootNode();

            // set the raw value to the record's display field if a record was found
            me.setRawValue(record ? record.get(this.displayField) : '');

            return me;
    },
    getValue: function() {
        return this.value;
    },
    onLoad: function() {
        var value = this.value;

        if (value) {
            this.setValue(value);
        }
    }
})


